<!--
 * @Descripttion:
 * @Version: 1.0
 * @Author: win
 * @Date: 2023-04-03 17:47:51
 * @LastEditors: win
 * @LastEditTime: 2024-03-29 15:29:51
-->
<template>
  <div class='pagination'>
    <div class="pageClass">
      <span style="margin-right:16px;">第 {{ currentRecord }}-{{ lastRecord }} 条/总共 {{ total }} 条</span>
      <el-pagination v-model:current-page="page" v-model:page-size="size" background :page-sizes="pageSizes" layout=" prev, pager, next,sizes" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue';
import { ref, toRef, watch } from 'vue';
const props = defineProps({
  total: {
    required: true,
    type: Number as PropType<number>,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array as PropType<number[]>,
    default() {
      return [10, 20, 30, 50];
    },
  },
});
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'change']);
const total = toRef(props, 'total');

//计算属性-当前页
const page = computed<number>({
  get: () => props.currentPage,
  set: (value) => {
    emit('update:currentPage', value);
  },
});
// 计算属性-每页几条数据
const size = computed<number>({
  get() {
    return props.pageSize;
  },
  set(val) {
    emit('update:pageSize', val);
  },
});
// 计算属性-当前分页展示的第1条为总的第几条
const currentRecord = computed(() => {
  if (total.value > 0) {
    return (page.value - 1) * size.value + 1;
  } else {
    return 0;
  }
});
// 计算属性-当前分页展示的最后1条为总的第几条
const lastRecord = computed(() => {
  if (page.value * size.value >= total.value) {
    return total.value;
  } else {
    return page.value * size.value;
  }
});
// 更改currentPage
function handleCurrentChange(val: number) {
  emit('change');
}
// 更改pageSize
function handleSizeChange(val: number) {
  emit('change');
}
</script>

<style lang='scss' scoped>
.pagination {
  .pageClass {
    margin: 8px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
